Skip to content

Skip redrawing iOS Text when only its position changes - #59155

Open
hryhoriiK97 wants to merge 1 commit into
react:mainfrom
hryhoriiK97:ios-text-skip-position-redraw
Open

hryhoriiK97 wants to merge 1 commit into
react:mainfrom
hryhoriiK97:ios-text-skip-position-redraw

Conversation

@hryhoriiK97

@hryhoriiK97 hryhoriiK97 commented Oct 16, 2026 •

Copy link
Copy Markdown
Contributor

Summary:

RCTParagraphComponentView draws its text in a child RCTParagraphTextView, positioned at the paragraph's content frame within the view's own bounds.

Current behavior. The view requests a redraw of its text on every layout metrics update and on every state update. Both fire for a paragraph that has merely moved:

  • the mounting layer sends layout metrics whenever any metric differs, including the frame's origin alone;
  • a relayout gives the paragraph a new state even when its text is unchanged, because AttributedString equality includes each fragment's parentShadowView, whose layout metrics changed, so ParagraphShadowNode::updateStateIfNeeded sees a different string.

So when the content above a paragraph changes height, every paragraph below it re-runs TextKit layout and glyph rasterization, although its bounds, padding and text are unchanged. A row inserted at the top of a non-virtualized list redraws every label under it.

With this change. A redraw is requested only when something the drawing depends on changed:

  • in updateLayoutMetrics:, the view's frame size, its content frame (which carries the content insets the drawing origin is derived from), or the pixel scale factor;
  • in updateState:, the text content (AttributedString::isContentEqual, which compares strings and text attributes but not layout metrics) or the paragraph attributes. A string containing inline views keeps redrawing on every state, since attachment sizes come from the layout metrics the content comparison ignores.

A recycled view always receives a new state before it is displayed, and the first state of a view always redraws, so neither comparison can skip a needed redraw.

Why. Text drawing is the most expensive per-view work on the main thread during a reflow, and none of it is needed when the paragraph only moved.

Changelog:

[IOS] [FIXED] - Text no longer redraws when only its position changes, such as when content above it changes height

Test Plan:

  • node scripts/clang-format.js --check on the changed file passes.
  • RNTester built with xcodebuild in Release for a physical iPhone 15 Pro; the Text examples render as before, including after content above a paragraph changes height, after a paragraph's own size changes, and after a text change with unchanged metrics.
  • Screenshots of a 1000-label list and of a set of edge cases (right-aligned text with an inline view, centered multi-line text, empty text with an explicit size, truncation across nested colours, RTL with an inline view, clipped fixed height, two-line tail ellipsis) are byte-identical before and after.
  • Measurement. RNTester Playground with 1000 unique single-line and wrapping labels mounted in a ScrollView; a "reflow" toggles the height of a spacer above the labels from 0 to 40 pt, so every label moves and none changes size. Timed from Fabric's transaction telemetry, a run-loop observer after the CoreAnimation commit (mount end to display), a timer around -[RCTParagraphTextView drawRect:], and the touchend Event Timing entry for the press (press to mount end). The two arms are the same binary with the new checks switched by an environment variable. iPhone 15 Pro, Release, medians of 5 presses:
reflow with 1000 labels mounted before this PR change
text redraws 1001 1
drawRect total, system font 63.0 ms 0.7 ms −99%
drawRect total, fontFamily: 'Avenir' 51.1 ms 0.1 ms −100%
mount end to display, system font 115.6 ms 1.7 ms −99%
mount end to display, Avenir 106.7 ms 1.0 ms −99%
press to mount end, system font 180.1 ms 67.4 ms −63%
press to mount end, Avenir 176.4 ms 68.0 ms −61%

The one remaining redraw is the harness's own status label, whose text changes. The table above is from manual presses. The same sequence was then driven by Argent on the device: with this change it again redrew 0 to 4 labels per reflow and measured 33 to 74 ms press-to-mount across ten reflows; without it, the reflows that redrew measured 150 to 200 ms press-to-mount, matching the manual figures. Mount and unmount figures agreed between the two methods within noise. Press-to-mount also drops because the main thread no longer spends the previous frame drawing before it can run the next mount. Mounting, unmounting and text changes are unchanged within noise: mounting the same 1000 labels measures 113 ms to display in both arms.

🤖 Generated with Claude Code

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 16, 2026
@hryhoriiK97
hryhoriiK97 force-pushed the ios-text-skip-position-redraw branch from 69e6b87 to d387cce Compare October 16, 2026 23:19
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Oct 16, 2026
`RCTParagraphComponentView` requested a redraw on every layout metrics
update and on every state update. Both fire for a paragraph that merely
moved: the mounting layer sends layout metrics whenever the origin changes,
and a relayout gives the paragraph a new state even with unchanged text,
because the attributed string records each fragment's layout metrics. A
reflow above a list therefore redrew every paragraph below it.

Text is drawn relative to the view's own bounds and content frame, from the
content and paragraph attributes in its state. Redraw only when one of those,
or the pixel density, changed. Strings with inline views keep redrawing on
every state, since attachment sizes come from the layout metrics the content
comparison ignores.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@hryhoriiK97
hryhoriiK97 force-pushed the ios-text-skip-position-redraw branch from d387cce to 6d5de49 Compare October 17, 2026 12:00
meta-codesync Bot pushed a commit that referenced this pull request Oct 19, 2026
Summary:
`RCTViewComponentView` (`React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm`) applies a view's borders, shadow path, background colour and image layers, box shadows, outline, filters and clipping masks in `invalidateLayer`, which runs from `finalizeUpdates:` whenever `_needsInvalidateLayer` is set.

**Current behavior.** `updateLayoutMetrics:oldLayoutMetrics:` sets `_needsInvalidateLayer` unconditionally. The mounting layer calls it whenever any layout metric differs, including the frame origin alone, so a view that merely moved runs the whole invalidation: it resolves border metrics, recreates the shadow path, re-applies about ten layer properties, re-rasterizes the border image when borders are non-uniform, and removes and recreates the box-shadow, outline, background-image and mask sublayers. When the content above a list changes height, every card below it pays this although nothing it draws has changed.

**With this change.** The layout metrics are compared with the stored ones with the origin masked out. If only the origin changed, the invalidation is not requested; every other change (size, content insets, border widths, overflow inset, display type, layout direction, scale factor) still invalidates as before, and so does a recycled view, whose stored metrics are `EmptyLayoutMetrics`. Everything `invalidateLayer` derives is in the view's own coordinate space (`bounds`, `layer.bounds`, padding frame), with one exception: the iOS 17 hover shape is built from `self.frame` to work around a UIKit bug, so views with `cursor: pointer` keep invalidating on moves. The subview and sublayer frame updates in `updateLayoutMetrics:` are unchanged.

**Why.** Position-only layout updates are the common case in a reflow: inserting a row, expanding an accordion, a keyboard-avoiding shift, or a LayoutAnimation moving content. The cost scales with the number of styled views below the change.

## Changelog:

[IOS] [FIXED] - Views no longer rebuild their layer styling (borders, shadows, background and mask layers) when only their position changes

Pull Request resolved: #59168

Test Plan:
- `node scripts/clang-format.js --check` on the changed file passes.
- RNTester built with `xcodebuild` in Release and run on a physical iPhone 15 Pro (iOS 26.6.1).
- In screenshots of a reflowed list of 1000 cards (border radius, 1pt border, solid background, shadow props) and of the same list with `boxShadow`, the list area is byte-identical before and after.
- **Measurement.** RNTester Playground with 1000 cards mounted in a `ScrollView`, each a `View` wrapping a `Text`; a "reflow" toggles a spacer above the list between 0 and 40pt, so every card moves and none changes size. Three contents: plain (unstyled wrapper, which Fabric flattens, so only the `Text` views remain), card (`borderRadius: 8`, `borderWidth: 1`, solid `backgroundColor`, `shadowColor/Opacity/Radius/Offset`) and the same card with `boxShadow` instead. Timed from Fabric's transaction telemetry (mount phase), a timer around `invalidateLayer`, a run-loop observer after the CoreAnimation commit (mount end to display), and the `touchend` Event Timing entry for the press (press to mount end). The two arms are the same binary with the new check switched by an environment variable; both include #59155 so that text redraws do not dominate the reflow. The presses were driven by [Argent](https://github.com/software-mansion/argent) on the physical iPhone, with no accessibility polling between presses. iPhone 15 Pro, Release, medians of 5 reflows:

| reflow with 1000 cards (shadow props) | before | this PR | change |
|---|--:|--:|--:|
| layer invalidations | 1001 | 13 | |
| `invalidateLayer` total (main thread) | 59.2 ms | 1.5 ms | −97% |
| mount phase (main thread) | 61.5 ms | 3.8 ms | −94% |
| mount end to display | 5.3 ms | 1.4 ms | |
| press to mount end | 114.6 ms | 69.9 ms | −39% |

| reflow with 1000 cards (`boxShadow`) | before | this PR | change |
|---|--:|--:|--:|
| layer invalidations | 2001 | 10 | |
| `invalidateLayer` total (main thread) | 66.6 ms | 0.9 ms | −99% |
| mount phase (main thread) | 70.4 ms | 4.0 ms | −94% |
| mount end to display | 18.3 ms | 0.1 ms | −99% |
| press to mount end | 126.8 ms | 42.5 ms | −66% |

Each arm was run twice. The repeat of the before arm gave 114.1 ms and 132.1 ms press to mount end for the two card styles (58.2 ms and 66.9 ms of invalidation), the repeat of the after arm 52.3 ms and 53.2 ms (1.1 ms and 0.9 ms), so the saving is 39 to 68% of the press across both runs and both card styles. The remaining invalidations are views whose size or props do change in that commit, such as the harness's own status labels. The plain list is unchanged (0.8 ms of invalidation per reflow before, under 0.1 ms after, press to mount end within noise at 41 and 46 ms), as are mounting and unmounting: mounting the 1000 cards measures 141 ms in the mount phase in both arms, with the same 2001 invalidations.

Not exercised: the hover shape for `cursor: pointer`, which needs a pointer device; by design those views invalidate on moves exactly as before.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed By: cipolleschi

Differential Revision: D126038802

Pulled By: javache

fbshipit-source-id: d70780f522c85d90a077a46e3a3a31e433ab3cd5
BOOL needsDisplay = YES;
if (newState && oldState && _textView.state) {
const auto &newData = newState->getData();
const auto &oldData = std::static_pointer_cast<const ParagraphShadowNode::ConcreteState>(oldState)->getData();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use _textView.state? That's the state the view was last mounted with, which may be different from oldState due to recycling.

Suggested change
const auto &oldData = std::static_pointer_cast<const ParagraphShadowNode::ConcreteState>(oldState)->getData();
const auto &oldData = static_cast<const ParagraphShadowNode::ConcreteState &>(*oldState)->getData();

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants